<template>
  <div>
    <!-- 页面头部 -->
    <van-nav-bar
      title="摄影作品"
      style="font-weight: bold"
      @click-left="$router.go(-1)">
      <template #left>
        <van-icon name="revoke" color="#fdc03a" size="20" />
      </template>
    </van-nav-bar>

    <van-notice-bar background="#ecf9ff" color="#1989fa" left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false">
        <van-swipe-item>第一期 “摄影投票大赛” 开始啦!!!</van-swipe-item>
        <van-swipe-item>第一期“摄影投票大赛”周期为一个月</van-swipe-item>
        <van-swipe-item>每一期单个用户只能发布一张摄影作品哦!</van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <!-- 主体表单 -->
    <van-form>
      <!-- 标题 -->
      <van-cell-group>
        <van-field
          v-model="title"
          label="标题"
          label-width="6.6rem"
          placeholder="请输摄影标题"
          maxlength="10"
          colon
          clear-trigger
          onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"/>
      </van-cell-group>
    </van-form>
    <div class="photopic">
      <span>选择相片:</span>
      <el-upload
        class="avatar-uploader"
        action="http://39.108.211.154:8080/upload_photo"
        name="uploadFile"
        :limit="1"
        :on-success="onSuccess"
        list-type="picture-card">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <button class="btn" @click="submit">发 &nbsp;&nbsp;&nbsp;表</button>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Notify } from 'vant';
import { Dialog } from "vant";
export default {
  data() {
    return {
      title: "", //标题数据
      photopic: "",
    };
  },
  watch: {
    // 获取标题数据
    photopic() {
      console.log(this.photopic);
    },
  },
  mounted() {
    this.axios.get(`http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`)
    .then((res) => {
      this.userlist = res.data;
    });
  },
  methods: {
    // 获取图片路径的钩子
    onSuccess(resp) {
      this.photopic = resp.urls[0];
    },
    // 提交按钮
    submit() {
      if (this.title == "" || this.photopic == '') {
        Notify({ type: 'danger', message: '内容不能为空', duration: '2000' });
      } else {
        let params = `pname=${this.title}&vote=0&photo=${this.photopic}&p_uname=${this.$store.state.user}`;
        console.log(params);
        let url = `http://39.108.211.154:8080/onload_photo`;
        this.axios.post(url, params).then((res) => {
          this.$router.go(-1);
          Toast.success("发布成功");
          this.axios.get(`http://39.108.211.154:8080/now_surplus_photo?username=${this.$store.state.user}`).then(res => {
            console.log('已修改为0', res);
          })
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
::v-deep.van-cell-group {
  width: 80%;
  margin-top: 2vh;
}
.avatar-uploader{
  display: block;
  width: 148px;
  margin: 10px auto 0;
  height: 148px;
  overflow: hidden;
}
.photopic{
  margin-top: 20px;
  span{
    margin-left: 15px;
    position: absolute;
    color: #646566;
    font-size: 15px;
  }
}
.btn {
  display: block;
  background: #fdc03a;
  border-radius: 13vw;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border: none;
  width: 70vw;
  height: 13vw;
  position: fixed;
  top: 350px;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
}
</style>
    

